<template>
  <el-container class="order-container">
    <el-main>
      <el-row :gutter="10">
       <el-col :span="6">
         <h3>已购买商品 <span style="color: #F56C6C">{{total}}</span> 单</h3>
       </el-col>
        <el-col :span="6">
          <h3>累计购买金额 ¥ <span style="color: #F56C6C"></span> </h3>
        </el-col>
      </el-row>
      <el-row :gutter="10">
      <!--  <table-view
          :templateDiv="{operation:true,orderStatus:true,courseRange:true,payAmount:true}"
          :columns="recordsTableContent"
          :pageList="columData">
          <template slot="payAmount" slot-scope="scope">
            ￥{{scope.row.payAmount}}
          </template>
          <template slot="orderStatus" slot-scope="scope">
            {{scope.row.orderStatus | orderStatusFilter}}
          </template>
          <template slot="operation" slot-scope="scope">
            <el-button size="mini"><router-link :to="{name:'orderDetail',query:{id:scope.row.orderId}}">查看订单</router-link></el-button>
            <el-button size="mini" type="primary" @click="handleChangeRange">修改课程范围</el-button>
          </template>
          <template slot="courseRange" slot-scope="scope">
            {{scope.row.hasOwnProperty('giftMonthAge')? scope.row.giftMonthAge : scope.row.startMonthAge}}-
            {{scope.row.endMonthAge}}
          </template>
        </table-view>-->
        <TableOrderList
          :headerShow="true"
          :selection="false"
          :bulkShipBtnShow="false"
          :pageList="columData"
          :columns="recordsTableContent"
          @edit-btnclick="editBtnClick"
        >
          <template slot="orderHeader" slot-scope="scope">
            <template>
              订单编号：{{scope.row.productOrderNo}}
              <span class="danger" v-if="scope.row.tip">该订单中有“退款中“商品，发货后该商品的“退款申请“将自动撤销。</span>
              <span class="fr">{{scope.row.createTime}}</span>
            </template>
          </template>
        </TableOrderList>

        <!--分页-->
        <pagination-view  :pagesize="pageInfo.pageSize"
          :currentPage="pageInfo.pageNumber"
          :total="total"
          @size-change="sizeChange"
          @current-change="pageChange"
        ></pagination-view>
      </el-row>
    </el-main>
    <el-footer></el-footer>


  </el-container>
</template>

<script>
  import TableOrderList from '@/views/order/goodsOrder/components/TableOrderList'

  import PaginationView from '@/components/PaginationView'

  import * as pageApi from '@/api/user/userManage'

  import salerApi from '@/api/salers/salersManage'

  export default {
    name: 'mallOrderInfo',
    components: {
      TableOrderList,PaginationView
    },
    props:{
      active:{
        type:String
      }
    },
    data() {
      return {
        pageInfo: {
          pageNum: 1,
          pageSize: 10,
          userId: ''
        },
        total:0,
        columData: [],
        recordsTableContent: [ {
          field: 'itemMessage',
          label: '商品信息',
          width: 300
        }, {
          field: 'shipStatus',
          label: '订单状态'
        }, {
          field: 'refundStatus',
          label: '售后状态'
        }, {
          field: 'productNum',
          label: '数量',
          type:'number'
        }, {
          field: 'productAmount',
          label: '商品总价',
          type:'money'
        }, {
          field: 'payAmount',
          label: '实收金额',
          type:'money'
        }, {
          field: 'orderType',
          label: '订单类型',
          rowspan:true,
        },{
          field:'operation',
          label:'操作',
          rowspan:true,
          width: 200
        }],
        form: {
          targetSalerId: ''
        },
        rule: {},

      }
    },
    filters: {
      orderStatusFilter(val) {
        return {
          0: '待付款',
          1: '学习中',
          2: '已完成',
          3: '已关闭',
          4: '退款'
        }[val]
      }
    },
    watch:{
      active:{
        handler(val){
          let { id } = this.$route.query
          this.pageInfo.userId = id
          if(val === 'mallOrder'){
            this.getDetailById()
          }
        },
        immediate:true
      }
    },
    methods: {
      editBtnClick(row, type) {
        switch (type) {
          case 'viewOrder':
            this.$router.push({
              name: 'mallOrderDetail',
              query: {
                id: row.productOrderId,
                status: row.orderStatus,
                orderRefundId: row.orderRefundId
              }
            })
            break
        }
      },
      viewRecords(){

      },
      // pageSize变化函数
      sizeChange(val) {
        this.pageInfo.pageSize = val
        this.getDetailById()
      },
      // page变化函数
      pageChange(val) {
        this.pageInfo.pageNumber = val
        this.getDetailById()
      },

      getDetailById() {
        pageApi.getGoodsOrderById(this.pageInfo).then(res => {
          let data = res.body
          this.columData = data.records
          this.total = Number(data.total)
        })
      }

    },
    mounted() {

    }
  }
</script>

<style lang="scss" scoped>
  .bottom-line-area .bottom-line:last-child {
    border: none;
  }

  .order-container {
    font-pageSize: 13px;
  }

  h4 {
    border-left: 1px solid #666;
    padding-left: 8px;
  }

  p {
    padding-left: 15px;
  }

  .order-statue {
    background: #ddd;
    padding: 8px;
  }

  .bottom-line {
    clear: both;
    border-bottom: 2px solid #666;
    padding-bottom: 10px;
    /*padding-top: 10px;*/
  }
</style>
